<template>
  <div style="height: 100%" class="workspace">
    <el-container ref="listWarp" style="height: 100%">
      <div class="left">
        <div class="title"><span></span> 巡检记录</div>
        <div class="statusList">
          <div
            class="item"
            :class="searchObj.type === item.value ? 'activeItem' : ''"
            v-for="(item, index) in statusList"
            :key="index"
            @click="activeClick(item)"
          >
            <svg-icon
              :icon-class="item.icon"
              style="font-size: 13px; margin-right: 3px"
            />
            {{ item.label }}
          </div>
        </div>
      </div>
      <el-container
        style="height: 100%; background: #fff; flex: 1"
        class="right"
      >
        <el-header style="height: auto; padding: 20px 20px 0 20px">
          <div class="title" style="border: none">
            <span></span> {{ title }}
          </div>
          <div class="selectList">
            <div class="select">
              <el-select
                v-model="searchObj.areaId"
                placeholder="校区"
                size="small"
                clearable
                filterable
                @change="areaChange"
              >
                <el-option
                  v-for="item in schoolList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
              <el-select
                v-model="searchObj.regionId"
                placeholder="区域名称"
                size="small"
                clearable
                filterable
              >
                <el-option
                  v-for="item in areaList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
              <el-select
                v-model="searchObj.status"
                placeholder="检查结果"
                size="small"
                clearable
                filterable
              >
                <el-option
                  v-for="item in resultList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </div>
            <div class="btns" v-if="searchObj.type === '1'">
              <div class="pass" @click="event('1')">
                <svg-icon
                  icon-class="pass"
                  style="font-size: 13px; margin-right: 5px"
                />审批通过
              </div>
              <div class="reject" @click="event('2')">
                <svg-icon
                  icon-class="delete"
                  style="font-size: 13px; margin-right: 5px"
                />

                审批驳回
              </div>
            </div>
          </div>
        </el-header>
        <el-main style="height: 100%">
          <div class="content" style="height: calc(100% - 40px)">
            <el-table
              :data="tableData"
              height="100%"
              style="width: 100%"
              border
              v-loading="loading"
              @row-dblclick="tableDbEdit"
              @selection-change="handleSelectionChange"
              ref="dataListTable"
            >
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column
                type="index"
                width="50"
                label="序号"
              ></el-table-column>
              <el-table-column prop="approveStatus" label="状态" width="80">
                <template slot-scope="scope">
                  <span
                    v-if="scope.row.approveStatus === '1'"
                    style="color: #ff7d00"
                    >待审批</span
                  >
                  <span
                    v-if="scope.row.approveStatus === '2'"
                    style="color: #00b38b"
                    >通过</span
                  ><span
                    v-if="scope.row.approveStatus === '3'"
                    style="color: #f53f3f"
                    >驳回</span
                  ></template
                >
              </el-table-column>
              <el-table-column
                prop="areaName"
                label="校区"
                width="180"
              ></el-table-column>
              <el-table-column
                prop="regionName"
                label="区域名称"
              ></el-table-column>
              <el-table-column
                prop="deviceName"
                label="设备名称"
              ></el-table-column>
              <el-table-column label="检查结果" width="100px">
                <template slot-scope="scope">
                  <div v-if="scope.row.status === '1'" class="normal">正常</div>
                  <div v-if="scope.row.status === '2'" class="abnormal">
                    异常
                  </div></template
                ></el-table-column
              >
              <el-table-column
                prop="roomName"
                label="巡视记录表"
                width="100px"
              ></el-table-column>
              <el-table-column
                prop="createName"
                label="巡检人"
                width="180px"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="createTime"
                label="巡检时间"
                width="180px"
                align="center"
              ></el-table-column>
              <el-table-column label="详情" width="80px" align="center">
                <template slot-scope="scope">
                  <div
                    style="color: #00b38b; cursor: pointer"
                    @click="tableDbEdit(scope.row)"
                  >
                    详情
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <el-footer
              style="height: 45px; background-color: #fff"
              class="page-footer"
            >
              <el-pagination
                style="padding-top: 10px"
                background
                layout="prev, pager, next,jumper,total,sizes"
                @size-change="evtPageSizeChange"
                @current-change="evtPageCurrentChange"
                :current-page.sync="currentPage"
                :page-sizes="[20, 50, 100, 500]"
                :total="totalRows"
              ></el-pagination>
            </el-footer>
          </div>
        </el-main>
      </el-container>
    </el-container>
    <!-- 弹窗 -->
    <el-dialog
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      @close="evtDialogClose"
      lock-scroll
      title="巡检记录"
      width="500px"
    >
      <div class="status pendapproval" v-if="dataObj.approveStatus === '1'">
        待审批
      </div>
      <div class="status success" v-if="dataObj.approveStatus === '2'">
        已通过
      </div>
      <div class="status reject" v-if="dataObj.approveStatus === '3'">
        已驳回
      </div>
      <div v-loading="addloading">
        <div class="win-warp" style="height: 530px">
          <el-row>
            <el-col :span="8">
              <div class="formLabel">校区</div>
              <div class="formName">{{ dataObj.areaName }}</div>
            </el-col>
            <el-col :span="8">
              <div class="formLabel">区域名称</div>
              <div class="formName">{{ dataObj.regionName }}</div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="formLabel">设备名称</div>
              <div class="formName">{{ dataObj.deviceName }}</div>
            </el-col>
            <el-col :span="8">
              <div class="formLabel">检查结果</div>
              <div class="formName">
                <div v-if="dataObj.status === '1'" class="normal">正常</div>
                <div v-if="dataObj.status === '2'" class="abnormal">异常</div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="formLabel">巡检人</div>
              <div class="formName">{{ dataObj.createName }}</div>
            </el-col>
            <el-col :span="8">
              <div class="formLabel">巡检时间</div>
              <div class="formName">{{ dataObj.createTime }}</div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" v-if="dataObj.remark">
              <div class="formLabel">备注</div>
              <div class="formName">
                {{ dataObj.remark }}
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="formLabel" style="margin-bottom: 8px">巡视记录表</div>
              <div
                class="imgsBox"
                v-if="dataObj.picList && dataObj.picList.length > 0"
              >
                <el-image
                  v-for="(item, index) in dataObj.picList"
                  :key="index"
                  style="width: 70px; height: 70px"
                  :src="item"
                  :preview-src-list="dataObj.picList"
                >
                </el-image>
              </div>
            </el-col>
          </el-row>
          <div class="line"></div>
          <div class="approveBox">
            <div class="title" style="border: none">审批日志</div>

            <el-timeline>
              <el-timeline-item
                v-for="(item, index) in dataObj.approveLogList"
                :key="index"
              >
                <div class="statusName">
                  <span v-if="item.status === '1'" style="color: #ff7d00"
                    >待审批</span
                  >
                  <span v-if="item.status === '2'" style="color: #00b38b"
                    >通过</span
                  >
                  <span v-if="item.status === '3'" style="color: #f53f3f"
                    >驳回</span
                  >
                  <span v-if="item.status === '4'" style="color: #ff7d00"
                    >转审批</span
                  >
                </div>
                <div class="nameanddate">
                  <span style="margin-right: 15px">{{ item.userName }}</span
                  ><span>{{ item.createTime }}</span>
                </div>
                <div class="nameanddate" v-if="item.status === '3'">
                  <span style="margin-right: 15px">驳回原因</span
                  ><span>{{ item.remark }}</span>
                </div>
              </el-timeline-item>
            </el-timeline>
          </div>
        </div>
        <div
          class="dialog-footer"
          v-if="dataObj.approveStatus === '1' && searchObj.type === '1'"
        >
          <el-button
            @click="changeUser"
            v-if="dataObj.node != '1'"
            size="small"
            style="background: #eee; border: none; color: #666"
            >转审批人</el-button
          >
          <!-- v-if="dataObj.node != '1'" -->

          <el-button
            @click="approve('1')"
            size="small"
            style="background: #00b38b; border: none; color: #ffffff"
            >审批通过</el-button
          >
          <el-button
            @click="dialogApprove = true"
            type="primary"
            size="small"
            style="background: #f53f3f; border: none; color: #ffffff"
            >审批驳回</el-button
          >
        </div>
      </div>
    </el-dialog>
    <!-- 弹窗 -->
    <el-dialog
      :visible.sync="dialogApprove"
      :close-on-click-modal="false"
      @close="evtDialogClose"
      lock-scroll
      title="审批驳回"
      width="430px"
    >
      <div v-loading="appLoading">
        <div class="win-warp" style="height: 120px">
          <div style="margin-bottom: 10px">驳回说明</div>
          <el-input
            type="textarea"
            v-model="reason"
            rows="3"
            placeholder="请输入驳回说明"
          ></el-input>
        </div>
        <div class="dialog-footer">
          <el-button @click="dialogApprove = false" size="small"
            >取 消</el-button
          >
          <el-button
            @click="approve('2')"
            type="primary"
            size="small"
            style="background: #00b38b; border: none"
            >确定</el-button
          >
        </div>
      </div>
    </el-dialog>
    <!-- 弹窗 -->
    <el-dialog
      :visible.sync="dialogChange"
      :close-on-click-modal="false"
      @close="evtDialogClose"
      lock-scroll
      title="转审批"
      width="430px"
    >
      <div v-loading="appChangeLoading">
        <div class="win-warp" style="height: 250px">
          <el-form
            :model="form"
            :rules="addRules"
            ref="addForm"
            label-position="top"
            size="small"
          >
            <el-row :gutter="10">
              <el-col :span="24">
                <el-form-item label="审批人" prop="userId">
                  <el-select
                    v-model="form.userId"
                    placeholder="请选择"
                    style="width: 100%"
                    clearable
                    filterable
                  >
                    <el-option
                      v-for="item in userList"
                      :key="item.userId"
                      :label="item.userName"
                      :value="item.userId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="原因" prop="reason">
                  <el-input
                    type="textarea"
                    v-model="form.reason"
                    rows="3"
                    placeholder="请输入说明"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="dialog-footer">
          <el-button @click="dialogChange = false" size="small"
            >取 消</el-button
          >
          <el-button
            @click="approve('3')"
            type="primary"
            size="small"
            style="background: #00b38b; border: none"
            >确定</el-button
          >
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { inspectionRecordApi } from "@/api/patrol/inspectionRecord";
export default {
  data() {
    return {
      statusCurrent: "1",
      title: "待我审批的",
      totalRows: 0,
      pageSize: 20,
      currentPage: 1,
      tableData: [],
      statusList: [
        { value: "1", label: "待我审批的", icon: "dwsp" },
        { value: "2", label: "我已审批", icon: "wysp" },
        { value: "3", label: "抄送给我的", icon: "csgwd" },
      ],
      searchObj: {
        type: "1",
        regionId: "",
      },
      search: [],
      reason: "",
      loading: false,
      appChangeLoading: false,
      schoolList: [], // 校区
      areaList: [], // 区域
      resultList: [
        {
          name: "正常",
          id: "1",
        },
        {
          name: "异常",
          id: "2",
        },
      ], // 检查结果
      dialogFormVisible: false,
      currentRow: null,
      addloading: false,
      dialogApprove: false,
      dialogChange: false,
      appLoading: false,
      dataObj: {},
      multipleSelection: [],
      inspectionIds: "",
      form: {},
      userList: [],
      addRules: {
        userId: [
          {
            required: true,
            message: "请选择审批人",
            trigger: "blur",
          },
        ],
        reason: [
          {
            required: true,
            message: "请填写原因",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    changeUser() {
      this.dialogChange = true;
      this.getChangeUserList();
    },
    getChangeUserList() {
      this.appChangeLoading = true;
      inspectionRecordApi.getApproveUser(this.dataObj.id).then((res) => {
        this.userList = res.data;
        this.appChangeLoading = false;
      });
    },
    event(val) {
      if (this.multipleSelection.length === 0) {
        this.$message.error("请先选择需要处理的单子");
        return;
      }
      this.inspectionIds = this.multipleSelection.map((e) => e.id).toString();

      if (val === "1") {
        this.approve(val);
      } else if (val === "2") {
        this.dialogApprove = true;
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 审批
    approve(val) {
      if (val === "1") {
        this.$confirm("确定审批通过吗？", "审批通过", {
          distinguishCancelAndClose: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        }).then(() => {
          this.addloading = true;
          inspectionRecordApi
            .approve(this.inspectionIds, val)
            .then((res) => {
              this.$message.success("操作成功");
              this.getTableList();
              this.addloading = false;
              this.dialogFormVisible = false;
            })
            .catch(() => {
              this.addloading = false;
            });
        });
      } else if (val === "2") {
        this.appLoading = true;
        inspectionRecordApi
          .approve(this.inspectionIds, val, this.reason)
          .then((res) => {
            this.$message.success("操作成功");
            this.getTableList();
            this.dialogApprove = false;
            this.appLoading = false;
            this.dialogFormVisible = false;
          })
          .catch(() => {
            this.appLoading = false;
          });
      } else if (val === "3") {
        this.$refs.addForm.validate((valid) => {
          if (valid) {
            this.appChangeLoading = true;
            inspectionRecordApi
              .transferApproveUser(
                this.dataObj.id,
                this.form.reason,
                this.form.userId
              )
              .then((res) => {
                this.addloading = false;
                if (res.status == "success") {
                  this.$message.success("提交成功");
                  this.dialogChange = false;
                  this.dialogApprove = false;
                  this.dialogFormVisible = false;
                  this.appChangeLoading = false;
                  this.$refs.addForm.clearValidate();
                  this.$refs.addForm.resetFields();
                  this.getTableList();
                }
              })
              .catch(() => {
                this.appChangeLoading = false;
              });
          } else {
            this.appChangeLoading = false;
            return false;
          }
        });
      }
    },
    activeClick(item) {
      this.searchObj.type = item.value;
      this.title = item.label;
    },
    tableDbEdit(row) {
      this.dialogFormVisible = true;
      this.currentRow = row;

      this.getDetail();
    },
    //巡检日志信息详情+审批日志
    getDetail() {
      this.addloading = true;
      inspectionRecordApi.getDetail(this.currentRow.id).then((res) => {
        this.dataObj = res.data;
        this.dataObj.picList = this.dataObj.pic
          ? this.dataObj.pic.split(",").map((e) => {
              return this.$itsoftUI.config.fileServer + e;
            })
          : [];
        this.inspectionIds = this.dataObj.id;
        this.addloading = false;
      });
    },
    // 获取表格数据
    getTableList() {
      this.loading = true;
      this.searchObj.pageIndex = this.currentPage;
      this.searchObj.pageSize = this.pageSize;
      inspectionRecordApi.List(this.searchObj).then((res) => {
        this.tableData = res.data.rows;
        this.tableData.forEach((item) => {
          item.picList = item.pic
            ? item.pic.split(",").map((e) => {
                return this.$itsoftUI.config.fileServer + e;
              })
            : [];
        });
        this.totalRows = res.data.total;
        this.loading = false;
      });
    },
    evtPageSizeChange(val) {
      //每页数量
      this.pageSize = val;
      this.getTableList();
    },
    evtPageCurrentChange(val) {
      //分页
      this.currentPage = val;
      this.getTableList();
    },
    getSchoolList() {
      inspectionRecordApi.getSchoolList().then((res) => {
        this.schoolList = res.data;
        if (this.schoolList.length > 0) {
          // this.searchObj.areaId = this.schoolList[0].id;
          this.getAreaList();
        }
      });
    },
    areaChange() {
      this.searchObj.regionId = "";
      this.getAreaList();
    },
    getAreaList() {
      let search = [
        {
          andOr: "and",
          searchField: "areaId",
          operator: "=",
          searchValue: this.searchObj.areaId,
        },
      ];
      inspectionRecordApi.getAreaList(JSON.stringify(search)).then((res) => {
        this.areaList = res.data;
      });
    },
    // 关闭
    evtDialogClose() {
      this.form = {};
      this.reason = "";
    },
  },
  created() {
    this.getTableList();
    this.getSchoolList();
  },
  watch: {
    searchObj: {
      handler() {
        this.getTableList();
      },
      deep: true,
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-row {
  margin-bottom: 15px !important;
}
.approveBox {
  .nameanddate {
    font-size: 12px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #86909c;
    margin-top: 5px;
  }
  .title {
    font-size: 14px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #1d2129;
  }
 ::v-deep .el-timeline {
    margin-top: 15px;
    padding: 0;
  }
}
.line {
  width: 100%;
  height: 1px;
  background: #e5e6eb;
  margin-bottom: 14px;
  margin-top: 10px;
}
.normal {
  width: 44px;
  height: 24px;
  background: #cef9ef;
  border-radius: 2px 2px 2px 2px;
  opacity: 1;
  color: #00b38b;
  display: flex;
  align-items: center;
  justify-content: center;
}
.abnormal {
  width: 44px;
  height: 24px;
  background: #ffece8;
  border-radius: 2px 2px 2px 2px;
  opacity: 1;
  color: #f53f3f;
  display: flex;
  align-items: center;
  justify-content: center;
}
.status {
  width: 62px;
  height: 32px;
  border-radius: 2px 2px 2px 2px;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 20px;
  left: 100px;
}
.pendapproval {
  color: #ff7d00;
  background: #fff7e8;
  border: 1px solid #ff7d00;
}
.success {
  border: 1px solid #00b38b;
  background: rgba(0, 179, 139, 0.1);
  color: #00b38b;
}
.reject {
  background: #ffece8;
  border: 1px solid #f53f3f;
  color: #f53f3f;
}
.workspace {
  .win-warp {
    position: relative;
    .formLabel {
      font-size: 14px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #86909c;
      margin-bottom: 5px;
    }
    .formName {
      font-size: 14px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #1d2129;
    }
  }
  .title {
    display: flex;
    align-items: center;
    column-gap: 8px;
    font-size: 16px;
    font-family: Alibaba PuHuiTi 2-65 Medium, Alibaba PuHuiTi 20;
    font-weight: normal;
    color: #1d2129;
    span {
      display: inline-block;
      width: 3px;
      height: 15px;
      background: #00b38b;
    }
    padding-bottom: 16px;
    border-bottom: 1px solid #eeeeee;
  }
  .left {
    width: 238px;
    background: #fff;
    margin-right: 10px;
    padding: 20px;

    .statusList {
      margin-top: 10px;
      .item {
        font-size: 14px;
        height: 42px;
        background: #fff;
        line-height: 42px;
        cursor: pointer;
        padding: 0 10px;
      }
      .activeItem {
        background: #e5f7f3;
        border-radius: 2px 2px 2px 2px;
        color: #00b38b;
      }
    }
  }
  .right {
    // padding: 20px;
    .selectList {
      display: flex;
      justify-content: space-between;
      .select {
        display: flex;
        column-gap: 10px;
      }
      .btns {
        display: flex;
        column-gap: 12px;
        div {
          width: 110px;
          height: 32px;
          border-radius: 2px 2px 2px 2px;
          font-size: 14px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }
        .pass {
          background: #00b38b;
        }
        .reject {
          background: #ff5c5e;
        }
      }
    }
  }
}
</style>
